
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
         <!-- <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/finance/nolinecommission">线下结算的佣金收入</router-link></div>
         --> <div class="hei10"></div>
                <div class="powertop">
                    <!-- <router-link class="powertopli powertopact" to="/finance/nolinecommission">佣金收入</router-link>
                    <router-link class="powertopli" to="/finance/onlinecommission/tkshouru">提卡费收入</router-link> -->
					<router-link class="powertopli powertopact" to="/finance/onlinecommission">原佣金收入</router-link>
                    <router-link class="powertopli " to="/yongjin/yongjinwai">佣金收入管理</router-link>

                    <!-- <router-link class="powertopli " to="/yongjin/yongjinnei">系统内佣金收入</router-link> -->
                    <router-link class="powertopli " to="/yongjin/yongjinchaxun">佣金收入查询</router-link>
                    <router-link class="powertopli " to="/finance/onlinecommission/tkshouru">提卡费收入</router-link>
                </div>
                <div class="con"  style="width: 1116px;">
                    <div class="flex tktiao">
                        <div class="tkli " @click="goto('/finance/onlinecommission')">线上结算的佣金收入</div>
                        <div class="tkli tkact" @click="goto('/finance/onlinecommission/nolinecommission')">线下结算的佣金收入</div>
                    </div>
                    <div class="flex">
                        <!-- 商务导入 -->
                        <div class="gong gl">
                            <!-- <el-upload class="upload-demo" :show-file-list='false' action="https://jsonplaceholder.typicode.com/posts/" :http-request="upup">
                              <el-button size="small" type="primary">导入线下结算佣金数据</el-button>
                            </el-upload> -->
                            <el-button size="small" type="primary" @click="daorulog = true">导入线下结算佣金数据</el-button>
                            <el-button  type="text" @click="xiazai">导入模板下载</el-button>
                        </div>
                        <div class="gong moneyf">
                            <el-form ref="form" @submit.native.prevent :model="form" label-width="80px" class="form">
                                <el-form-item label="确认状态:">
                                    <el-select v-model="status" placeholder="请选择">
                                        <el-option label="未确认" value="0"></el-option>
                                        <el-option label="已确认" value="1"></el-option>
                                        <el-option label="全部" value="2"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="时间:">
                                    <el-date-picker v-model="monthsearch2" type="month" value-format="yyyy-MM" placeholder="选择月份"></el-date-picker>
                                </el-form-item>
                                <el-form-item label="收入名称:">
                                    <el-input v-model="name2" placeholder="请输入收入名称"></el-input>
                                </el-form-item>
                                <el-button type="danger" @click="search">搜索</el-button>
                            </el-form>
                        </div>
                    </div>
                </div>
                <div class="conlist">
                    <div class="list">
                        <div class="th">收入名称</div>
                        <div class="th">运营商</div>
                        <div class="th">归属地</div>
                        <div class="th">导入时间</div>
                        <div class="th">收入订单数量</div>
                        <div class="th">收入额度</div>
                        <div class="th">收入确认状态</div>
                        <div class="th">导入人</div>
                        <div class="th td2" style="justify-content: center">操作</div>
                    </div>
                    <div class="list" v-for="item in list" :key="item.id">
                        <div class="td">{{item.name}}</div>
                        <div class="td">{{item.operator}}</div>
                        <div class="td">{{item.province}}{{item.city}}</div>
                        <div class="td">{{item.created_at}}</div>
                        <div class="td">{{item.count}}</div>
                        <div class="td">{{item.sum_amount | qux}}</div>
                        <div class="td">{{item.confirm_count}}</div>
                        <div class="td">{{item.up_name}}</div>
                        <div class="td td2" @click="nowid(item.id,item.user_filename,item.local_filename)">
                            <el-button type="text" v-if="item.cloud_filename == ''" disabled>确认表生成中</el-button>
                            <el-button type="text" v-if="item.cloud_filename != ''"  @click="down(item.cloud_filename)">下载确认表</el-button>
                            <!-- <el-upload class="upload-demo" v-if="item.confirm_count == '未确认'" :show-file-list='false' action="https://jsonplaceholder.typicode.com/posts/" :http-request="upup2">
                              <el-button type="text">导入确认表</el-button>
                            </el-upload> -->

                            <el-upload class="upload-demo" v-if="item.confirm_count == '未确认'" :show-file-list='false' action="https://jsonplaceholder.typicode.com/posts/" :http-request="upup5">
                              <el-button type="text">导入确认表</el-button>
                            </el-upload>


                            <el-dropdown trigger="click" @command="more" >
                              <span class="el-dropdown-link" @click="nowid(item.id,item.user_filename,item.local_filename)" style="color:#409EFF">更多<i class="el-icon-arrow-down el-icon--right"></i></span>
                              <el-dropdown-menu slot="dropdown" >
                                  <el-dropdown-item command="a">
                                      <el-upload class="upload-demo" :show-file-list='false' action="https://jsonplaceholder.typicode.com/posts/" :http-request="upup3">
                                        <el-button type="text" >上传上游原始表</el-button>
                                      </el-upload>
                                  </el-dropdown-item>
                                  <el-dropdown-item v-if="item.user_filename != ''" command="b">下载上游原始表</el-dropdown-item>
                                  <el-dropdown-item command="c">下载收入明细</el-dropdown-item>
                                  <el-dropdown-item command="d">撤销导入</el-dropdown-item>
                              </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </div>
                    <el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
                </div>
            </div>
        </div>

        <!-- <foot></foot> -->
        <el-dialog title="导入结果" :visible.sync="shoplog" :close-on-click-modal="false" width="600px">
              <div>
                  <div style="color: #077ECE; line-height: 30px;">成功{{shoplist.success}}条</div>
                  <div style="color: #DF3434; line-height: 30px;">失败及原因：
                      <div v-for="(item,i) in shoplist.erros" :key="i">
                          {{item}}
                      </div>
                  </div>
              </div>
              <div slot="footer" class="dialog-footer">
                  <el-button type="primary" size="small"  @click="shoplog = false">好的</el-button>
              </div>
        </el-dialog>
        <el-dialog title="校验结果" :visible.sync="jiaoyanlog" :close-on-click-modal="false" width="600px">
              <div>
                  <!-- <div style="color: #077ECE; line-height: 30px;">成功{{shoplist.success}}条</div> -->
                  <div style="color: #DF3434; line-height: 30px;">失败及原因：
                      <div v-for="(item,i) in shoplist.erros" :key="i">
                          {{item}}
                      </div>
                  </div>
				  <el-button type="danger" size="medium" @click="xiazai2(shoplist.csv)">下载表格看错误</el-button>

              </div>
              <div slot="footer" class="dialog-footer">
                  <el-button type="primary" size="small"  @click="jiaoyanlog = false">好的</el-button>
              </div>
        </el-dialog>
        <el-dialog title="导入线下收入明细" :visible.sync="daorulog" :close-on-click-modal="false" width="600px">
              <div style="padding-left: 60px;">
                  <el-form ref="form" :model="form" label-width="80px">
                      <el-form-item label="*收入名称:">
                          <el-input v-model="name" style="width: 320px;"></el-input>
                      </el-form-item>
                      <el-form-item label="运营商:">
                          <el-select v-model="qrstatus" placeholder="请选择"  style="width: 320px;">
                              <el-option v-for="item in sanlist" :key="item.id" :label="item.name" :value="item.id"></el-option>
                          </el-select>
                      </el-form-item>
                      <el-form-item label="归属地:">
                          <el-cascader @change="changeaddress" v-model="guishudi" :options="citylist"  style="width: 320px;"></el-cascader>
                      </el-form-item>
                      <el-form-item label="*选择月份:">
                          <el-date-picker v-model="monthsearch" @change="changemonth" type="month" value-format="yyyy-MM" placeholder="选择月份" style="width: 320px;"></el-date-picker>
                      </el-form-item>
                      <el-form-item label="*上传表格:">
                          <el-upload class="upload-demo" :show-file-list='false' action="https://jsonplaceholder.typicode.com/posts/" :http-request="upup" >
                            <el-button size="small" type="primary">导入线下结算佣金数据</el-button>
                          </el-upload>
                          <div v-if="wenjian != ''">文件已上传</div>
                      </el-form-item>
                  </el-form>
              </div>
              <div slot="footer" class="dialog-footer">
                  <el-button type="danger" size="small" :loading="jiaoyanload"  @click="jiaoyan">数据效验</el-button>
                  <el-button type="danger" size="small" :loading="zhijiedaoruload"  @click="zhijiedaoru">跳过校验直接导入</el-button>
              </div>
        </el-dialog>
    </div>

</template>

<script>
    import qu0 from '../../../public/qu0.js'
    import { provinceAndCityData, CodeToText, TextToCode } from 'element-china-area-data'
    import axios from 'axios'
    import top from '@/components/top.vue'
    import left from '@/components/left.vue'
    import foot from '@/components/foot.vue'
    import QRcode from '@xkeshi/vue-qrcode';
    import moment from "moment";
    export default {
        components: {
            "left": left,
            "top": top,
            "foot": foot,
            qrcode : QRcode
        },
        name: "nolinecommission",
        data() {
            return {
              name2:"",
                jiaoyanload:false,
                zhijiedaoruload:false,
                sanlist:[
                  // {name:"中国联通",id:10010},
                  // {name:"中国移动",id:10086},
                  // {name:"中国电信",id:10000},
				  {name:"中国广电",id:10099}
                ],
                month:"",
                total:0,
                pagesize:20,
                page:1,
                list:"",
                loading:false,
                form:{},
                qrstatus:"",
                status:'2',
                monthsearch:"",
                shoplog:false,
                shoplist:"",
                shouruname:"",
                daorulog:false,
                guishudi:"",
                citylist:provinceAndCityData,
                province:"",
                city:"",
                monthx:"",
                name:"",
                jiaoyanlog:false,
                wenjian:"",
                chooseid:"",
                user_func:"",
                func_J02:false,
                leader:0,
                user_filename:"",
                cloud_filename:"",
                url:"",
                monthsearch2:"",
                shopid:"",
                downurl:"",
                downurl2:""
            }
        },
        filters: {
            qux:function(dataStr){
                return qu0.qu0(dataStr)
            }
        },
        created() {
            this.url = window.location.origin+"/"

            //权限问题
            var user = JSON.parse(localStorage.getItem('USER'));
            this.user_func = user.functions
            for( var i in this.user_func){
                var func_number = this.user_func[i].code
                if(func_number.indexOf("J02") >= 0){ this.func_J02 = true }
                if(func_number.indexOf("J01") >= 0){ this.func_J01 = true }
                if(func_number.indexOf("J03") >= 0){ this.leader = 1 }
            }

            var shop = JSON.parse(localStorage.getItem('SHOP'));
            //地址配置,用于下载模板
			if (window.location.href.indexOf("91haoka_platform") > -1) {
				console.log("线上项目，谨慎操作。")
				this.url = window.location.origin
			} else {
				this.url = ""
			}
            this.shopname = shop.shop_name
            this.shopid = shop.shop_id
            var that = this

            this.getlist()
        },
        mounted() {

        },
        methods: {
            goto:function(url){
              this.$router.push(url)
            },
            //重传原始表
            upup3:function(file){
              this.wenjian = file.file
              var that = this
              this.loading = true
              var params = new FormData();
              params.append('file',this.wenjian);
              params.append('id',this.chooseid);
              axios.post("/api/plan-market/origin/income/import", params)
                  .then(function(response) {
                      if (response.data.msg.code == 0) {
                          that.$message.success("导入确认表成功！");
                          that.loading = true
                          that.getlist()
                      }else{
                          that.$message.error(response.data.msg.info);
                      }
                  })
            },
            upup5:function(file){
              this.wenjian = file.file
              var that = this
              var params = new FormData();
              params.append('file',this.wenjian);
              params.append('file_id',this.chooseid);
              axios.post("/api/plan-market/confirm/import/check", params)
                  .then(function(response) {
                      if (response.data.msg.code == 0) {
                          that.$message.success("导入确认表校验成功！");

                          axios.post("/api/plan-market/confirm/import", params)
                              .then(function(response) {
                                  if (response.data.msg.code == 0) {
                                      that.$message.success("导入确认表成功！");
                                      that.loading = true
                                      that.getlist()
                                  }else{
                                      that.$message.error(response.data.msg.info);
                                  }
                              })
                      }else{
                          that.$message.error(response.data.msg.info);
                      }
                  })
            },
            //导入确认表
            upup2:function(file){
              this.wenjian = file.file
              var that = this
              var params = new FormData();
              params.append('file',this.wenjian);
              params.append('file_id',this.chooseid);
              axios.post("/api/plan-market/confirm/import", params)
                  .then(function(response) {
                      if (response.data.msg.code == 0) {
                          that.$message.success("导入确认表成功！");
                          that.loading = true
                          that.getlist()
                      }else{
                          that.$message.error(response.data.msg.info);
                      }
                  })
            },
            //下载佣金明细
            down:function(url){
                //下载确认表
                console.log(this.url)
                console.log('/' + url)
                // return

                const a = document.createElement('a');
                a.setAttribute('href',this.url + url);
                a.click();


            },
            //选中的id
            nowid:function(id,shangyoubiao,shourubiao){
              this.chooseid = id
              this.downurl = shangyoubiao
              this.downurl2 = shourubiao
            },
            //点击更多
            more:function(command){
              if(command == 'b'){
                  //下载原始表
                  const a = document.createElement('a');
                  a.setAttribute('href', this.url + this.downurl);
                  a.click();
              }
              if(command == 'c'){
                  //下载收入明细
                  const a = document.createElement('a');
                  a.setAttribute('href',this.url + this.downurl2);
                  a.click();
              }
              if(command == 'd'){
                  this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
                     type: 'warning'
                   }).then(() => {

                     var that = this
                     axios.post('/api/plan-market/income/delete',{id:this.chooseid})
                         .then(response => {
                             if(response.data.msg.code == 0){
                                 that.loading = true
                                 that.getlist()
                             }else{
                                 that.$message.error(response.data.msg.info);
                             }
                         })
                   })
              }
            },
            changemonth:function(){
                var m1 = this.monthsearch.substr(0,4)
                var m2 = this.monthsearch.substr(5,2)
                this.monthx = m1 + m2
            },
          //选择省市区
            changeaddress:function(v){
              this.province = CodeToText[v[0]],
              this.city = CodeToText[v[1]]
            },
            jiaoyan:function(){

              var that = this
              if(this.file == "" || this.monthx == "" || this.name == ""){
                that.$message.error("名称，月份，文件为必填");
                return false
              }
              this.jiaoyanload = true
              var params = new FormData();
              params.append('file',this.wenjian);
              params.append('operator',this.qrstatus);
              params.append('province',this.province);
              params.append('city',this.city);
              params.append('month',this.monthx);
              params.append('name',this.name);

              axios.post("/api/plan-market/income/import/check", params)
                      .then(function(response) {
                          if (response.data.msg.code == 0) {
                              that.shoplist = response.data.data
                              that.jiaoyanload = false
                              that.jiaoyanlog = true
                              that.loading = false
                              that.getlist()
                          }else{
                              that.$message.error(response.data.msg.info);
                              that.jiaoyanload = false
                          }
                      })
            },
            zhijiedaoru:function(){

              var that = this
              if(this.file == "" || this.monthx == "" || this.name == ""){
                that.$message.error("名称，月份，文件为必填");
                return false
              }
              this.zhijiedaoruload = true
              var params = new FormData();
              params.append('file',this.wenjian);
              params.append('operator',this.qrstatus);
              params.append('province',this.province);
              params.append('city',this.city);
              params.append('month',this.monthx);
              params.append('name',this.name);

              axios.post("/api/plan-market/income/import", params)
                      .then(function(response) {
                          if (response.data.msg.code == 0) {
                              that.zhijiedaoruload = false
                              that.daorulog = false
                              that.shoplist = response.data.data
                              that.shoplog = true
                              that.loading = false
                              that.getlist()

                          }else{
                              that.$message.error(response.data.msg.info);
                              that.zhijiedaoruload = false
                          }
                      })
            },
            //导入模板
            upup:function(file){
              console.log(file.file)
              this.wenjian = file.file
              // var that = this
              // this.loading = true
              // var params = new FormData();
              // params.append('file',this.wenjian);
              // axios.post("/api/plan-market/income/import", params)
              //         .then(function(response) {
              //             if (response.data.msg.code == 0) {
              //                 that.shoplist = response.data.data
              //                 that.shoplog = true
              //                 that.loading = false
              //                 that.getlist()
              //             }else{
              //                 that.$message.error(response.data.msg.info);
              //             }
              //         })
            },
			xiazai2:function(url){
				const a = document.createElement('a');
				a.setAttribute('download', '');
				a.setAttribute('href', url);
				a.click();
			},
            //下载模板
            xiazai:function(){
                // const a = document.createElement('a');
                // a.setAttribute('download', '线下收入模板.xlsx');
                // a.setAttribute('href', this.url+'91haoka_platform/static/daorushuju.xlsx');
                // a.click();
                const a = document.createElement('a');
				a.setAttribute('download', '线下收入模板.xlsx');
				a.setAttribute('href', this.url + 'static/xianxiashouru.xlsx');
				a.click();
            },
            search:function(){
                this.getlist()
            },
            //翻页
            fanye:function(page){
            	this.loading = true
            	this.page = page
            	this.getlist()
            },
            //获取列表
            getlist:function(){
                var that = this
                if(this.monthsearch2 == null){
                    this.monthsearch2 = ''
                }
                axios.get('/api/plan-market/income/import/logs?page='+this.page+'&page_size='+this.pagesize+'&created_at='+this.monthsearch2+'&status='+this.status+'&is_leader='+this.leader+'&name='+this.name2)
                	.then(response => {
                		if(response.data.msg.code == 0){
                              that.list = response.data.data.data
                              for(var i = 0; i < that.list.length; i++){
                                  if(that.list[i].confirm_count == null){that.list[i].confirm_count = "未确认"}else{that.list[i].confirm_count = "已确认"}
                                  if(that.list[i].operator == '10086'){that.list[i].operator = "中国移动"}
                                  if(that.list[i].operator == '10010'){that.list[i].operator = "中国联通"}
                                  if(that.list[i].operator == '10000'){that.list[i].operator = "中国电信"}
                                  if(that.list[i].operator == '10099'){that.list[i].operator = "中国广电"}

                              }
                              that.total = response.data.data.total
                              that.loading = false
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})
            },
        }
    }
</script>

<style lang="scss" scoped>
    .index{
        .el-pagination{ text-align: right; margin: 20px 0}
        .listupload{ font-size: 14px;
            .li{flex: 1; line-height: 38px; margin-top: 20px;}

        }
        .moneyf{
          .el-button--primary{ background: #409EFF; color: #ffffff; border: none; }
          .el-button{ height: 36px !important;}
          .el-date-editor.el-input, .el-date-editor.el-input__inner{ width: auto;}
        }
        .form{ display: flex;
          input{ width: 150px !important;}
        }
        .moneylist{ display: flex;}
        .erimg{ width: 200px;}
        .red{ border: 1px #FF3B3B solid !important; color: #FF3B3B !important;}
        .moneylist div{ border: 1px #AAAAAA solid; width: 85px; height: 35px; line-height: 35px; text-align: center; margin-right: 10px; cursor: pointer;}

                .title{border-bottom: 1px #EAEAEA solid;  line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272}


            .powertop{ display: flex; background:#f9f9f9; }
            .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #f9f9f9 solid; color: #727272; border-right: 1px #f9f9f9 solid; font-size: 14px; text-align: center;}
            .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}
            .con{  background: #FFFFFF; padding: 30px 20px 0; display: flex; justify-content: space-between; flex-wrap: wrap;
                .conleft{ display: flex; flex-basis: 600px;
                  .l1{ flex-basis: 150px; text-align: center; font-size: 16px;}
                  .l2{ margin-bottom: 20px; color:#535353}
                  .l3{ color: #FF003D;}
                }
                .conright{  padding-top: 20px; cursor: pointer;
                  a{ color:#197CFF;}
                }
                .flex{ display: flex; justify-content: space-between; width: 100%;}
                .tktiao{ margin-bottom: 20px;
                  .tkli{ flex: 1; text-align: center;  background: url(../../../static/img/duanhui.png) no-repeat; line-height: 38px; cursor:pointer;}
                  .tkact{ background: url(../../../static/img/duanhong.png) no-repeat; color:#FFFFFF;}
                }
                .gong{ display: flex;
                    .el-input__inner{ width: 250px;}
                    .el-button{ height: 36px !important;}
                    .el-button--danger{ margin-left: 20px; margin-top: 1px;}
                    .el-button--primary{ padding: 10px 30px; background: #EEF7FF; border: 1px #EEF7FF solid; }
                    .el-date-editor--month{ margin-right: 20px;}
                    button{  padding: 10px 20px;}
                }
                .gl{ margin-bottom: 20px;
                    .el-input__inner{ width: 200px !important; }
                    .el-button--danger{ margin-left: 0px !important; margin-right: 20px;}
                    .el-input__icon{ line-height: 36px;}
                }
            }
            .conlist{ padding-bottom: 20px; background: #FFFFFF; min-height: 800px;
                .contilte{ line-height: 60px; padding-left: 20px; font-size: 15px; background: #eee;}
                .flex{ display: flex; justify-content: space-between}

                .gong{ display: flex;
                    .el-input__inner{ width: 250px;}
                    .el-button--danger{ margin-left: 20px;}
                }
                .list{ display: flex; border-bottom: 1px #eaeaea solid;
                    .th{ background: #EAEAEA; text-align: center; flex: 1; padding: 15px 0; font-size: 14px; }
                    .td{ background: #ffffff; text-align: center; flex: 1; padding: 5px 5px; height: 40px; font-size: 14px; line-height: 40px; overflow:
                    hidden;white-space: nowrap;text-overflow: ellipsis;}
                }
                .td2{ flex:2 !important; display: flex;  justify-content: space-between}
            }

    }
</style>
